<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员中心</title>
    <style>
        .member-info{
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .margin-action{
            margin-top: 20px;
        }
        button{
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover{
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h2>会员中心</h2>
    <div class="member-info">
        <p>用户名:<span>张三</span></p>
        <p>会员等级:<span id="member-level">高级会员</span></p>
        <p>积分:<span id="points">500</span></p>
    </div>
    <div class="member-action">
        <button id="edit-profile">编辑个人资料</button>
        <button id="redeem-points">兑换积分</button>
    </div>
    <script>
        //获取相关元素
        const editProfileBtn = document.getElementById('edit-profile');
        const redeemPointsBnt = document.getElementById('redeem-points');
        editProfileBtn.addEventListener('click',function(){
            alert('您点击了编辑个人资料按钮');
        });
        redeemPointsBnt.addEventListener('click',function(){
            alert('您点击了兑换积分按钮');
        });
    </script>
</body>
</html>